import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import { CHeaderWrapper, HeaderLeft, HeaderRight } from './style';
import { Link } from 'react-router-dom';
import { useAppDispatch } from '@/store/hooks';
import { setCurrentCat } from '@/views/discover/c-components/songs/store/songs';
interface IProps {
  children?: ReactNode;
  icon: string;
  iconShow: boolean;
  name: string;
  nameSize?: string;
  moreLink: string;
  keywords: string[];
  moreIcon?: boolean;
}

const CommonHeader: FC<IProps> = (props) => {
  const { icon, iconShow, name, moreLink, keywords, moreIcon = true, nameSize = 'normal' } = props;
  const dispatch = useAppDispatch();
  return (
    <>
      <CHeaderWrapper className={iconShow ? icon : ''} $iconShow={iconShow}>
        <HeaderLeft>
          {moreLink != '' ? (
            <Link to={moreLink} className={'title ' + nameSize}>
              {name}
            </Link>
          ) : (
            <span className={'title ' + nameSize}>{name}</span>
          )}
          <div className="list">
            {keywords.map((item) => {
              return (
                <div className="item" key={item}>
                  <Link
                    className="redirect"
                    to={'/discover/songs'}
                    onClick={() => {
                      dispatch(setCurrentCat(item));
                    }}
                  >
                    {item}
                  </Link>
                  <span>|</span>
                </div>
              );
            })}
          </div>
        </HeaderLeft>
        <HeaderRight>
          {moreLink != '' &&
            (moreIcon ? (
              <>
                <Link to={moreLink}>更多</Link>
                <i className="icon sprite_02"></i>
              </>
            ) : (
              <Link to={moreLink}>更多 {'>'}</Link>
            ))}
        </HeaderRight>
      </CHeaderWrapper>
    </>
  );
};

export default memo(CommonHeader);
